<template>
	<view class="zxh-taohuo">
		<view class="zxh-taohuo-tab">
			<ul>
				<li @click="tab1">
					<p :class="tabOption==1?'taohuo-option':null">数码产品</p>
				</li>
				<li @click="tab2">
					<p :class="tabOption==2?'taohuo-option':null">图书文具</p>
				</li>
				<li @click="tab3">
					<p :class="tabOption==3?'taohuo-option':null">服饰鞋包</p>
				</li>
				<li @click="tab4">
					<p :class="tabOption==4?'taohuo-option':null">美妆闲置</p>
				</li>
				<li @click="tab5">
					<p :class="tabOption==5?'taohuo-option':null">体育用品</p>
				</li>	
			</ul>
		</view>
		<!-- 内容展示区 -->
		<view class="zxh-taohuo-root">
			<TaohuoRoot v-for="item in taohuo" :key="item.id" :taohuo="item"></TaohuoRoot>
		</view>
	</view>
</template>

<script>
	import TaohuoRoot from '../components/TaohuoRoot';
	export default {
		components:{
			TaohuoRoot
		},
		data() {
			return {
				//控制头部选项卡和展示区状态
				tabOption:1,
				//存数据
				taohuoData:[],
				taohuo:[]
			}
		},
		methods:{
			tab1(){
				this.tabOption = 1;
				this.taohuo= this.taohuoData.filter((item)=>{
					return item.state == "数码产品"
				})
			},
			tab2(){
				this.tabOption = 2;
				this.taohuo= this.taohuoData.filter((item)=>{
					return item.state == "图书文具"
				})
			},
			tab3(){
				this.tabOption = 3;
				this.taohuo= this.taohuoData.filter((item)=>{
					return item.state == "服饰鞋包"
				})
			},
			tab4(){
				this.tabOption = 4;
				this.taohuo= this.taohuoData.filter((item)=>{
					return item.state == "美妆闲置"
				})
			},
			tab5(){
				this.tabOption = 5;
				this.taohuo= this.taohuoData.filter((item)=>{
					return item.state == "体育用品"
				})
			}
		},
		mounted() {
			this.$api.zxhtaohuo().then(res => {
				this.taohuoData = res.data;
				this.taohuo = this.taohuoData;
			})
		}
	}
</script>

<style lang="scss" scoped>
.zxh-taohuo {
	.zxh-taohuo-tab {
		width: 100%;
		height: 90upx;
		box-shadow: 0 10upx 20upx #cccccc;
		ul {
			height: 90upx;
			padding: 0;
			li {
				list-style: none;
				width: 150upx;
				height: 90upx;
				float: left;
				text-align: center;
				line-height: 90upx;
				font-size: 26upx;
				display: flex;
				p{
					margin: auto;
					height: 90upx;
					line-height: 90upx;
					font-size: 26upx;
				}
				.taohuo-option{
					height: 86upx;
					line-height: 90upx;
					font-weight: 600;
					color: #28d2d1;
					border-bottom: 4upx solid #28d2d1;
				}
			}
		}
	}
	.zxh-taohuo-root{
		padding-bottom: 110upx;
	}
}
</style>
